<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="hfiusdhfiusd" content="uhefiuhsiufhuis">
    <title>旋转相册</title>
    <style>
        * {
            /*overflow: hidden;!*超出隐藏  不再旁边显示滚动条*!*/
            margin: 0;
            background-color: #eff6fd;
        }

        .wrap {
            position: relative; /*相对定位*/
            width: 300px;
            height: 200px;
            margin: 220px auto;
            /*background-color: #90beec;*/
        }

        .wrap img {
            box-sizing: border-box;
            position: absolute; /*绝对定位*/
            width: 100%;
            height: 100%;
            border: 3px solid #FFFFFF;
            transition: 0.5s;
        }

        .wrap:hover img:nth-child(1) {/*img:nth-child(1)   可以代替class类名*/
            transform: translate(-100%, -40%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img2 {
            transform: translate(-20%, -85%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img3 {
            transform: translate(60%, -130%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img4 {
            transform: translate(-80%, 45%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img5 {
            transform: translate(80%, -45%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img6 {
            transform: translate(-60%, 130%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img7 {
            transform: translate(20%, 85%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img8 {
            transform: translate(100%, 40%) scale(0.8) rotate(-15deg);
        }

        .wrap:hover .img9 {
            transform: scale(1.15) rotate(-15deg);
        }

    </style>
</head>
<body>
<div class="wrap">
    <img class="img1" src="images/1.jpg">
    <img class="img2" src="images/2.jpg">
    <img class="img3" src="images/3.jpg">
    <img class="img4" src="images/4.jpg">
    <img class="img5" src="images/5.jpg">
    <img class="img6" src="images/6.jpg">
    <img class="img7" src="images/7.jpg">
    <img class="img8" src="images/8.jpg">
    <img class="img9" src="images/9.jpg">
</div>
</body>
</html>